import {
  Form,
  Card,
  Button,
  DatePicker,
  Radio,
  Select,
  Steps,
  Input,
  Row,
  Col,
  Select,
  InputNumber,
  Table,
  message,
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { TableListItem } from '../data.d';

const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const R = require('ramda');
import { connect } from 'dva';

export interface FormValsType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, formVals?: FormValsType) => void;
  handleModalVisible: (values: FormValsType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}

export interface UpdateFormState {
  formVals: FormValsType;
}

const orderForm = Form.create()(
  class OrderForm extends React.Component {
    static defaultProps = {
      handleModalVisible: () => {},
      handleUpdateModalVisible: () => {},
      values: {},
    };

    constructor(props: UpdateFormProps) {
      super(props);
      this.state = {
        productflag: false, //产品列表数据
        showFreight: false,
        showPremium: false,
        productList: [],
      };
    }

    statistics = {};
    handleResetFields = () => {
      this.props.form.resetFields();
      const { dispatch, handleModalVisible, handleSearch } = this.props;
      dispatch({
        type: 'declareManagement/refreshState',
        payload: {
          buyerList: {},
        },
      });

      handleModalVisible(false);
      handleSearch();
    };

    getForm = () => {
      const { form, dispatch, recordFormValues } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let flag = true;

        if (flag) {
          let dataSource = { ...fieldsValue, ...this.statistics };
          dataSource.declarationstyle = '2';
          let fun = '';
          if (recordFormValues.id) {
            fun = 'declareManagement/baseInfo';
            dataSource.id = recordFormValues.id;
          } else {
            fun = 'declareManagement/createPrivateCustomer';
          }

          dispatch({
            type: fun,
            payload: {
              dataSource,
              onSuccess: () => {
                this.handleResetFields();
              },
              onFail: () => {
                this.handleResetFields();
              },
            },
          });
        }
      });
    };

    handleAddProducts = tempProductList => {
      this.setState({ productList: R.concat(this.state.productList, tempProductList) });
    };

    render() {
      const {
        form: { getFieldDecorator, getFieldValue },
        buyerList,
        list,
        recordFormValues,
      } = this.props;

      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 },
        },
      };
      return (
        <Card style={{ margin: '10px auto', border: 'none' }}>
          <Form style={{ margin: '0 auto', maxWidth: '1000px' }}>
            <Row>
              <Col span={24}>
                <FormItem label="公司名称(中文)" {...formItemLayout}>
                  {getFieldDecorator('companyname', {
                    rules: [{ required: true, message: '请输入公司中文名称' }],
                    initialValue: buyerList.companyname,
                  })(<Input placeholder="请填写公司中文名称" />)}
                </FormItem>
              </Col>

              <Col span={24}>
                <FormItem label="公司名称(英文)" {...formItemLayout}>
                  {getFieldDecorator('companynameen', {
                    rules: [{ required: true, message: '请输入公司英文名称' }],
                    initialValue: buyerList.companynameen,
                  })(<Input placeholder="请填写公司英文名称" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="公司地址(中文)" {...formItemLayout}>
                  {getFieldDecorator('address', {
                    rules: [{ required: true, message: '请输入公司中文地址' }],
                    initialValue: buyerList.address,
                  })(<Input placeholder="请填写公司中文地址" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="公司地址(英文)" {...formItemLayout}>
                  {getFieldDecorator('addressen', {
                    rules: [{ required: true, message: '请输入公司英文地址' }],
                    initialValue: buyerList.addressen,
                  })(<Input placeholder="请填写公司英文地址" />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('telephone', {
                    rules: [{ required: true, message: '请输入联系电话' }],
                    initialValue: buyerList.telephone,
                  })(<InputNumber placeholder="请填写联系电话" style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label="纳税人识别码" {...formItemLayout}>
                  {getFieldDecorator('taxpayerid', {
                    rules: [{ required: true, message: '请输入纳税人识别码' }],
                    initialValue: buyerList.taxpayerid,
                  })(<InputNumber placeholder="请填写纳税人识别码" style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem label=" " colon={false} {...formItemLayout}>
                  {getFieldDecorator('sadsd', {})(
                    <>
                      {/*<> 不会增多余节点*/}
                      <Button
                        key="forward"
                        type="primary"
                        loading={this.props.loading}
                        onClick={() => this.getForm()}
                      >
                        保存报关抬头
                      </Button>
                      <Button
                        key="cancel"
                        style={{ marginTop: 8, marginLeft: 8 }}
                        onClick={() => this.handleResetFields()}
                      >
                        取消
                      </Button>
                    </>,
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Card>
      );
    }
  },
);

function mapStateToProps(state) {
  return {
    loading: state.loading.models.declareManagement,
  };
}

export default connect(mapStateToProps)(orderForm);
